<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ZhuaBa - Welcome</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::datepicker -->
    <link rel="stylesheet" href="../static/assets/vendors/datepicker/daterangepicker.css">
    <!-- begin::datepicker -->

    <!-- begin::vmap -->
    <link rel="stylesheet" href="../static/assets/vendors/vmap/jqvmap.min.css">
    <!-- begin::vmap -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="../static/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->
    <style type ="text/css">
        #events {
            padding: 45px 0 40px 130px;
            background: #fff
        }

        #events .title {
            padding-left: 45px;
            width: 320px;
            height: 45px;
            line-height: 45px;
            font-size: 20px;
            color: #666;
            background: #f5f5f5
        }

        #events .title .date {
            color: #333;
            font-weight: 700
        }

        #events .events {
            position: relative;
            margin: 5px 0 60px 148px;
            padding-top: 40px;
            width: 550px
        }

        #events .events dd {
            position: relative;
            *zoom:1;border-left: 1px solid #e1e3e6;
            padding-bottom: 45px
        }

        #events .events dd:after {
            content: '\0020';
            display: block;
            height: 0;
            font-size: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden
        }

        #events .events dd .year {
            position: absolute;
            left: -148px;
            top: 0;
            width: 120px;
            height: 25px;
            line-height: 25px;
            color: #333;
            font-size: 20px;
            text-align: right
        }

        #events .events dd .year .character {
            font-size: 16px
        }

        #events .events dd .icon {
            position: absolute;
            left: -18px;
            top: -5px;
            border: 5px solid #fff;
            width: 25px;
            height: 25px;
            border-radius: 8px;
            text-align: center;
            background: #e5e5e5
        }

        #events .events dd .icon em {
            line-height: 25px;
            font-size: 16px;
            color: #c2c2c2
        }

        #events .events dd .event {
            padding-top: 12px
        }

        #events .events dd .event .event_tit-wrapper {
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            border-top: 1px solid #e1e3e6
        }

        #events .events dd .event .event_tit-wrapper .event_tit {
            position: relative;
            top: -13px;
            margin-left: 35px;
            padding-left: 5px;
            background: #fff
        }

        #events .events dd .event .event_cnt {
            margin: -6px 0 0 40px;
            font-size: 14px;
            color: #999
        }

        #events .events dd:first-child {
            margin-top: -40px;
            padding-top: 40px
        }

        #events .events dd:first-child .year {
            margin-top: 40px
        }

        #events .events dd:first-child .icon {
            margin-top: 40px
        }

        #events .events dd:last-child {
            padding-bottom: 0;
            border-color: transparent
        }
        .mb-4, .my-4 {
            margin-bottom: 1.5rem!important;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        input{
            width: 324px;
            border: 1px solid #ccc;
            padding: 7px 3px;
            border-radius: 3px;
            padding-left:5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
        input:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
    </style>
    <script type="text/javascript">
        function myFunction()
        {
            $.ajax({
                type: "post",
                url : "http://localhost:8080/" + "/welcome/getPerson",
                dataType:'json',
                data: {
                },
                success: function(data){
                    var amount = data.data;
                    //取出总人数
                    var email = amount.email;
                    //总人数减去已经签到的人数，就是未签到的人
                    var username = amount.username;
                    //取出后端controller中setMessage方法传过来的字符串
                    var logMessage = data.message;
                    document.getElementById('Email').value=email;
                    document.getElementById('Username').value=username;
                }
            });

        }
    </script>
    <script type="text/javascript">
        function getPerson(){
            $.ajax({
                type: "post",
                url : "http://localhost:8080/" + "/person/getPerson",
                dataType:'json',
                data: {
                    "Username": document.getElementById("Username").value,
                    "Email": document.getElementById("Email").value,
                    "Password": document.getElementById("Password").value,
                },
                success: function(data){
                    var amount = data.data;
                    //取出总人数
                    var person1 = amount.person1;
                    var logMessage = data.message;
                    if(person1==1){
                        alert("更改成功！")
                    }
                }
            });
        }
    </script>
</head>
<body  onload="myFunction()" >

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <!-- 导航栏-->
            <li class="side-menu-divider">欢迎使用</li>
            <li class="open">
                <a href="/welcome.html"><i class="icon ti-home"></i> <span>历史上的今日</span> </a>
            </li>
            <li>
                <a href="/Music.html"><i class="icon ti-paint-bucket"></i> <span>今日热门歌曲</span> </a>
            </li>

            <li><a href="/News.html"><i class="icon ti-rocket"></i> <span>今日热点新闻</span> </a>
            </li>
            <li><a href="/Video.html"><i class="icon ti-crown"></i> <span>今日热门视频</span> </a></li>
            <li><a href="/History.html"><i class="icon ti-files"></i> <span>历史记录</span> </a>
            </li>
        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="../static/assets/media/image/light-logo.png" alt="...">
                <span class="logo-text d-none d-lg-block">Zhuaba</span>
            </a>
        </div>

        <div class="header-body">
            <ul></ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
                        <i class="fa fa-search"></i>
                    </a>
                </li>

                <li class="nav-item dropdown">
                    <a href="#" data-toggle="dropdown">
                        <figure class="avatar avatar-sm avatar-state-success">
                            <img class="rounded-circle" src="../static/assets/media/image/avatar.jpg" alt="...">
                        </figure>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="dropdown-divider"></div>
                        <a href="login.html" class="text-danger dropdown-item">登出</a>
                        <a href="Person.html" class="text-danger dropdown-item">个人信息</a>
                    </div>
                </li>
                <li class="nav-item d-lg-none d-sm-block">
                    <a href="#" class="nav-link side-menu-open">
                        <i class="ti-menu"></i>
                    </a>
                </li>
            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <div>
                <h4>个人信息</h4>
            </div>
        </div>
        <!-- end::page header -->
    </div>
    <div id="myarea">
        <div>
            <span style="margin-left:28px">  邮箱</span>
            <input type="text" name="Email" id="Email" value="" disabled>
        </div>
        <div style="width: auto">
            <span style="margin-left:13px"> 用户名</span>
            <input type="text"  name="Username" id="Username" value="" disabled>
        </div>
        <div style="width: auto">
            <span>新的密码</span>
            <input type="password"  name="Password" id="Password" >
        </div>
        <button class="btn btn-primary btn-lg btn-block btn-uppercase mb-4" onclick="getPerson()" type="submit" style="width: 324px;margin-left:60px" >修改</button>
    </div>
</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="../static/assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="../static/assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="../static/assets/js/examples/charts/chartjs.js"></script>
<script src="../static/assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="../static/assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="../static/assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="../static/assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="../static/assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="../static/assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/custom.js"></script>
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->
</body>
</html>